<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>药品页面</title>
<link rel="stylesheet" href="../../../layui/css/layui.css" media="all">
<link rel="stylesheet" media="screen" href="../../../res/wzw/css/styles.css" />
<style type="text/css">
	#one{
		border: 1px solid #dde7f7;
		width: 21%;
		height:80%;
		position:fixed;
		left: 3px;
	}
	
	#two{
		border: 1px solid #dde7f7;
		width: 76%;
		height:80%;
		position: relative;
		left: 22%;
	}
</style>
</head>
<body>
	<div id="one">
		<div class="panel">
			<ul id="uu">
		
			</ul>
		</div>
	</div>
	<div id="two">
		<div class="demoTable">
		  搜索:
		  <div class="layui-inline">
		    <input class="layui-input" style="width:100px;" name="drugName" id="drugName" autocomplete="off" placeholder="输入药品关键字">
		  </div>
		  <div class="layui-inline layui-form" style="width:130px;">
				<select name="dtId" id="dtId" 
					autocomplete="off" class="layui-input">
					<option></option>
				</select>
		  </div>
		  <div class="layui-inline">
		    <input class="layui-input" style="width:130px;" name="drugBarCode" id="drugBarCode" autocomplete="off" placeholder="输入药品编码">
		  </div>
		  <div class="layui-inline">
		    <input class="layui-input" style="width:100px;" name="drugPinyin" id="drugPinyin" autocomplete="off" placeholder="输入药品简称">
		  </div>
	      <div class="layui-input-inline" style="width: 80px;">
	        <input type="number" id="priceMin" name="priceMin" onkeyup="priceMin()" placeholder="￥" autocomplete="off" class="layui-input">
	      </div>
	      -
	      <div class="layui-input-inline" style="width: 80px;">
	        <input type="number" id="priceMax" name="priceMax" onkeyup="priceMax()"   placeholder="￥" autocomplete="off" class="layui-input">
	      </div>
		  <button class="layui-btn" data-type="reload">搜索</button>
		   <span>&nbsp;&nbsp;&nbsp;☆☆&nbsp;&nbsp;&nbsp;</span>
		  <button class="layui-btn" id="drpAdd" data-type="add">加入计划</button>
		</div>
		
		<table class="layui-hide" id="DrugModel" lay-filter="demo"></table>
	</div>
<script type="text/javascript" src="../../../res/js/base.js"></script>
<script src="../../../layui/layui.js"></script>
<script type="text/javascript" src="../../../res/wzw/js/jquery.min.1.6.4.js"></script>
<script src="../../../res/wzw/js/jquery-1.10.2.js"></script>
 <script type="text/javascript" src="../../../res/mln/getUrlParam.js"></script>

<script type="text/javascript" src="../../../res/wzw/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="../../../res/wzw/js/jquery.easing.1.3.js"></script>
<!-- <script type="text/javascript">
$(window).load(function() {
    
    $('.tag').each(function(i) {
    	setTimeout(function() {
    		$('.tag:eq('+i+')').css({ display: 'block', opacity: 0 }).stop().animate({ opacity: 1 }, 'easeInOutExpo'); 
    	}, 250 * (i + 1))
    });

	$('.tag').hover(function() {
		$(this).stop().animate({ paddingRight: ($('.tag_count', this).outerWidth() - 5) }, 'easeInOutExpo');
	}, function() {
		$(this).stop().animate({ paddingRight: 5 }, 'easeInOutExpo');
	});
	
});
</script> -->
<script>

layui.use(['form','laydate', 'laypage', 'layer', 'table', 'upload', 'element'], function(){
	  var laydate = layui.laydate //日期
	  ,laypage = layui.laypage //分页
	  layer = layui.layer //弹层
	  ,table = layui.table //表格
	  ,upload = layui.upload //上传
	  ,element = layui.element
	  ,form=layui.form;//元素操作
	 
	  //监听Tab切换
	  element.on('tab(demo)', function(data){
	    layer.msg('切换了：'+ this.innerHTML);
	    console.log(data);
	  });
	  
	  //执行一个 table 实例
	  table.render({
	     elem: '#DrugModel'
	    ,cellMinWidth: 80
	    ,url: getRootPath()+'DrugModel/findAll.action' //数据接口
	    ,page: true //开启分页
	    ,method:'post'
	    ,cols: [[ //表头
	       {type:'checkbox'}
	      /* ,{field: 'drugId', title: '药品ID', width:200} */
	      ,{field: 'dtName', title: '药品类型', width:90}
	      ,{field: 'drugBarCode', title: '药品编码', width:130}
	      ,{field: 'drugName', title: '药品名称', width:130}
	      ,{field: 'drugPrice', title: '药品价格', width:90}
	      ,{field: 'pov', title: '药品单位', width:90}
	      ,{field: 'drugPrices', title: '建议零售价', width:100}
	      ,{field: 'drugPinyin', title: '药品拼音简称', width:100}
	      ,{field:'drugImg',title:'药品图片', width:120, templet:'<div><img src="{{ d.drugImg}}"></div>'}
	    ]]
	  	,id: 'testReload'
  		,done: function(res){
  		    //如果是异步请求数据方式，res即为你接口返回的信息。
  		    //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
  		  	var p=document.getElementsByName("oo");
  			//alert(p.length);
  			//alert(res.data.length);
  			for(var i=0; i<p.length; i++){
  				//alert($(p[i]).attr('id'));
  				for(var j=0; j<res.data.length; j++){
  					if($(p[i]).attr('id')==res.data[j].drugId){
  						//alert(123);
  						res.data[j]['LAY_CHECKED']='true';
  						var index= res.data[j]['LAY_TABLE_INDEX'];
  	                    $('.layui-table tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', true);
  	                    $('.layui-table tr[data-index=' + index + '] input[type="checkbox"]').next().addClass('layui-form-checked');
  					}
  				} 
  			}
	  	 }
	  });
	  table.on('checkbox(demo)', function(obj){
		  // console.log(obj.checked); //当前是否选中状态
		  //var data = obj.data;
		  //alert(obj.type);
		  var checkStatus = table.checkStatus('testReload')
		  ,data = checkStatus.data;
		  //alert(JSON.stringify(data));
		   if(obj.type=="all"){
				var a=layui.table.cache.testReload;
				for(var i=0; i<a.length; i++){
					//alert(a[i].drugId);
					 $("#"+a[i].drugId).remove();
				};
				for(var i=0;i<data.length;i++){
					$("#uu").append("<li name='oo' id="+data[i].drugId+"><a href='#' class='tag'><span class='tag_name'>"+data[i].drugName+"</span><span class='tag_count' onclick='ss(\""+data[i].drugId+"\")'>X</span></a></li>")
				}
			  
		  }else{
			 if(obj.checked){
				var a=layui.table.cache.testReload;
				for(var i=0; i<a.length; i++){
					//alert(a[i].drugId);
					 $("#"+a[i].drugId).remove();
				};
				for(var i=0;i<data.length;i++){
					$("#uu").append("<li name='oo' id="+data[i].drugId+"><a href='#' class='tag'><span class='tag_name'>"+data[i].drugName+"</span><span class='tag_count' onclick='ss(\""+data[i].drugId+"\")'>X</span></a></li>")
				}	
			 	
			 }else{
				var a=layui.table.cache.testReload;
				for(var i=0; i<a.length; i++){
					//alert(a[i].drugId);
					 $("#"+a[i].drugId).remove();
				};
				for(var i=0;i<data.length;i++){
					$("#uu").append("<li name='oo' id="+data[i].drugId+"><a href='#' class='tag'><span class='tag_name'>"+data[i].drugName+"</span><span class='tag_count' onclick='ss(\""+data[i].drugId+"\")'>X</span></a></li>")
				}
			 }
		  }
		  //var ss=console.log(obj.data); //选中行的相关数据
		  $('.tag').each(function(i) {
		    	setTimeout(function() {
		    		$('.tag:eq('+i+')').css({ display: 'block', opacity: 0 }).stop().animate({ opacity: 1 }, 'easeInOutExpo'); 
		    	}, 250 * (i + 1))
		  });
		
		  $('.tag').hover(function() {
				$(this).stop().animate({ paddingRight: ($('.tag_count', this).outerWidth() - 5) }, 'easeInOutExpo');
		  }, function() {
				$(this).stop().animate({ paddingRight: 5 }, 'easeInOutExpo');
		  });
		  //console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
		  
	  });
	  //监听工具条
	  table.on('tool(demo)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
	    var data = obj.data //获得当前行数据
	    ,layEvent = obj.event; //获得 lay-event 对应的值
	  });
	  
	  //条件查询
	  var $ = layui.$;
			  
	  $('.demoTable .layui-btn').on('click', function(){
		 var drugName = $('#drugName');
		 var dtId = $('#dtId');
		 var drugBarCode = $('#drugBarCode');
		 var drugPinyin = $('#drugPinyin');
		 var priceMin = $('#priceMin');
		 var priceMax = $('#priceMax');
		 //执行重载
	     table.reload('testReload', {
	       page: {
	         curr: 1 //重新从第 1 页开始
	       }
	       ,where: {
	    	   drugName: drugName.val(),
	    	   dtId:dtId.val(),
	    	   drugBarCode:drugBarCode.val(),
	    	   drugPinyin:drugPinyin.val(),
	    	   priceMin:priceMin.val(),
	    	   priceMax:priceMax.val()
	       }
	     });
	  });
	  $('#drpAdd').on('click', function(){
		  var p=document.getElementsByName("oo");
			//alert(p.length);
			var bb="";
			var temp="";
			for(var i=0; i<p.length; i++){
				var temp=$(p[i]).attr('id');
				//alert(temp);
				if(bb==""){
					bb=temp;
				}else{
					bb=bb+","+temp;
				}
			}
			//alert(bb);
			var proId=getUrlParam('proId');
			var url = "../../../drugProduction/addOrDelete.action";
			var data={drugIds:bb,proId:proId}
			$.post(url,data,function(mes){
				if(mes.num>0){
					layer.msg('下一步,生产药品数量', {
						  icon: 1,
						  time: 1000 //1秒关闭（如果不配置，默认是3秒）
						}, function(){
							window.location="drugProduction.html?proId="+proId;
					});
				}
			},dataType="JSON");
		  
	   });
	  
	  var proId=getUrlParam('proId');
		//alert(proId);
		var url = "../../../drugProduction/findDrugIdByProId.action";
		var data={proId:proId}
		$.post(url,data,function(mes){
			for(var i=0;i<mes.length;i++){
				$("#uu").append("<li name='oo' id="+mes[i].drugId+"><a href='#' class='tag'><span class='tag_name'>"+mes[i].drugName+"</span><span class='tag_count' onclick='ss(\""+mes[i].drugId+"\")'>X</span></a></li>")
			}
			//form表单重新渲染
			$('.tag').each(function(i) {
		    	setTimeout(function() {
		    		$('.tag:eq('+i+')').css({ display: 'block', opacity: 0 }).stop().animate({ opacity: 1 }, 'easeInOutExpo'); 
		    	}, 250 * (i + 1))
		    });
		
			$('.tag').hover(function() {
				$(this).stop().animate({ paddingRight: ($('.tag_count', this).outerWidth() - 5) }, 'easeInOutExpo');
			}, function() {
				$(this).stop().animate({ paddingRight: 5 }, 'easeInOutExpo');
			});
			
			form.render();
		},dataType="JSON");
		
	  
	  var url = "../../../DrugModel/findAllType.action";
		$.post(url,null,function(data){
			for(var i=0;i<data.length;i++){
				$("#dtId").append("<option value="+data[i].dtId+">"+data[i].dtName+"</option>");
			}
			//form表单重新渲染
			form.render();
		},dataType="JSON");
		//form.render('select','selFilter'); 
		
	 /*  function reloadData(){
		  location.reload(); // 页面刷新
	  } */
	}); 
function priceMin(){
	var priceMin =Number(document.getElementById('priceMin').value);
	if(priceMin<=0||priceMin>=1000){
       $("#priceMin").attr("placeholder","1-999￥");
       document.getElementById('priceMin').value="";
       return false;
	}
}
function priceMax(){
	var priceMax =Number(document.getElementById('priceMax').value);
	var priceMin =Number(document.getElementById('priceMin').value);
	
	if(priceMax<=0||priceMax>=1000){
       $("#priceMax").attr("placeholder","1-999￥");
       document.getElementById('priceMax').value="";
       return false;
	}
	if(priceMax<=priceMin){
	   $("#priceMax").attr("placeholder","价格不符");
       document.getElementById('priceMax').value="";
       return false;
	}
}
function ss(obj){
	$("#"+obj).remove();
	layui.table.reload("testReload");
}
</script>
</body>
</html>